<!-- 合同模板 -->
<template>
  <div class="full-container">
    <page-main :white-bg="false" class="h100 flex-column">
      <div class="flex-row align-start">
        <SearchBarV2
          v-model:fields="searchForm"
          :form-schema="formItems"
          @search="search"
        />
        <div class="btn-wrapper">
          <el-button v-auth="'contract_download'" type="primary" :disabled="!multipleSelection.length" @click="exportContract">
            <el-icon class="icon"><Download /></el-icon>导出
          </el-button>
        </div>
      </div>
      <SchemaTable
        ref="schemaTableRef"
        :columns="columns"
        :data="loadData"
        :style="{width:'100%'}"
        row-key="id"
        :row-selection="selectQuestion"
        :selectable="selectable"
      >
        <!-- 合同状态 -->
        <template #contractStatus="scope">
          <div class="con-status">
            <span class="dot" :style="{'background': rowContractStatusColor(scope.row.contractStatus)}" />
            <span class="text">{{ scope.row.contractStatusDesc }}</span>
          </div>
        </template>
        <!-- 合同编号 -->
        <template #bizContractNo="scope">
          <span class="contract-no" @click="openLifeCircleFn">{{ scope.row.bizContractNo }}</span>
        </template>
        <!-- 操作 -->
        <template #action="scope">
          <el-button v-if="viewContractCom(scope.row.contractStatus)" v-auth="'contract_url'" type="primary" text @click.stop="viewContract(scope.row.id)">查看合同</el-button>
          <!-- <el-button v-if="allowCancelCom(scope.row.contractStatus)" type="primary" text @click.stop="allowCancel(scope.row.id)">允许作废</el-button> -->
          <!-- <el-button v-if="canCancelCom(scope.row.contractStatus)" type="primary" text @click.stop="canCancel(scope.row.id)">取消作废</el-button> -->
        </template>
      </SchemaTable>
      <div class="page-wrap">
        <el-pagination
          v-model:currentPage="searchForm.pageIndex"
          v-model:page-size="searchForm.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          background
          layout="total, sizes, prev, pager, next"
          @current-change="search"
          @size-change="handleSizeChange"
        />
      </div>
      <!-- 导出 -->
      <ExportDialog
        ref="exportDialogRef"
        @refresh-list="search"
      />
      <!-- 允许作废 -->
      <AllowCancelDialog
        ref="allowCancelDialogRef"
        @refresh-list="search"
      />
      <!-- 取消作废 -->
      <CanCancelDialog
        ref="canCancelDialogRef"
        @refresh-list="search"
      />
      <!-- 查看合同 -->
      <ShowPdfDialog
        ref="showPdfDialogRef"
      />
      <!-- 生命周期 -->
      <OpenLifeCircle
        ref="openLifeCircleRef"
      />
    </page-main>
  </div>
</template>

<script>
import useList from './composition/useList'
import useOperation from './composition/useOperation'
import ExportDialog from './components/exportDialog.vue'
import AllowCancelDialog from './components/allowCancelDialog.vue'
import CanCancelDialog from './components/canCancelDialog.vue'
import ShowPdfDialog from '@/components/PdfPreivew/showPdfDialog.vue'
import OpenLifeCircle from './components/lifeCircleDrawer.vue'

export default {
  components: { ExportDialog, AllowCancelDialog, CanCancelDialog, ShowPdfDialog, OpenLifeCircle },
  setup() {
    return {
      ...useList(), // 初始化渲染，条件搜索，表格渲染，分页
      ...useOperation() // 搜索表格页按钮、操作
    }
  }
}

</script>

<style scoped lang="scss">
.page-wrap {
  padding: 10px 10px 10px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #fff;
  border-radius: 4px;
}
.list-wrap {
  flex: 1;
  overflow: auto;
  height: 100%;
}
.con-status {
  display: flex;
  align-items: center;
  .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 6px;
  }
}
.contract-no {
  cursor: pointer;
  color: #247ffc;
}
</style>

